<template>
	<view class="content">
		<view class="search">
			<navigator hover-class="none" class="" style="flex:1;" :url="'./search'">
				<view class="searcht">
					<image class="searchico" src="../../static/images/search_icon.png"></image>
					<text class="text">搜索内容</text>
				</view>
			</navigator>
			<image @click="scan()" class="saomiao" src="../../static/images/ic_scan.png"></image>
		</view>
		<view v-for="(booklist,index) in booklists" :key="index">
			<navigator class="item" hover-class="none" :url="'./bookinfo?bookid=' + booklist.book_id + '&bookname=' + booklist.book_name + '&index=' + index">
				<image class="fengmian" :src="'https://www.yedushu.cn/' + booklist.bimg"></image>
				<view class="text-area">
					<text class="bookname" selectable="true" user-select="true">{{booklist.book_name}}</text>
					<text class="other" selectable="true" user-select="true">{{booklist.zuozhe}} / {{booklist.chubanshe}}</text>
				</view>
				<view class="readstate">
					<view class="readinfo" v-if="booklist.read_state == null" @click.stop="xiangdu_save(booklist.book_id, index)">
						<image class="icopic" src="../../static/images/ic_mark_todo.png"></image>
						<text class="readfont">想读</text>
					</view>
					<view v-else>
						<view class="readinfo" v-if="booklist.read_state.read_state == 1"  @click.stop="isreadstate(booklist.book_id,index)">
							<image class="icopic" src="../../static/images/ic_done_xs.png"></image>
							<text class="readfont">已想读</text>
						</view>
						<view class="readinfo" v-if="booklist.read_state.read_state == 2"  @click.stop="isreadstate(booklist.book_id,index)">
							<image class="icopic" src="../../static/images/ic_done_xs.png"></image>
							<text class="readfont">已在读</text>
						</view>
						<view class="readinfo" v-if="booklist.read_state.read_state == 3"  @click.stop="isreadstate(booklist.book_id,index)">
							<image class="icopic" src="../../static/images/ic_done_xs.png"></image>
							<text class="readfont">已读过</text>
						</view>
					</view>
				</view>
			</navigator>
		</view>
		<view v-if="isLoading" class="isload">加载更多...</view>
		<view v-else class="isend">~~ 我是有底线的 ~~</view>
		<delreadstate ref="reShare"></delreadstate>
	</view>
</template>

<script>
	import delreadstate from '@/components/tanchuang/delreadstate.vue';
	export default {
		components: {
			delreadstate
		},
		data() {
			return {
				booklists: [],
				userinfo: [],
				current_page: 1,
				isLoading: false
			}
		},
		// 发送给朋友
		onShareAppMessage(res) {
			//if (res.from === 'button') {
			// // 来自页面内分享按钮
			// 	console.log(res.target)
			//}
			return {
				title: '夜读书-我们的精神角落！',
				path: '/pages/books/booklist'
			}
		},
		// 分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '夜读书-我们的精神角落！',
				imageUrl: "https://www.yedushu.cn/images/yedushu_sharp_logo.png"
			}
		},
		onShow() {
			// 监听评分页面传来的事件
			uni.$on("booklist", res => {
				// console.log('列表上面上的，监听评分页面传来的事件');
				// console.log(res.index);
				// console.log(res.readstate);
				// console.log("1111111111" + JSON.stringify(this.booklists[res.index]));
			    // this.booklists[res.index].read_state.read_state = res.readstate;
				this.booklists[res.index].read_state  = {read_state : res.readstate};
				// console.log("222222222" + JSON.stringify(this.booklists[res.index]));
			    // 移除全局自定义事件监听器
			    uni.$off('booklist');
			});
			// 监听来自弹窗的的事件
			uni.$on("quxiaoreadstate", res => {
				// console.log('列表页面上的取消读书状态');
				// console.log("3333333" + JSON.stringify(this.booklists[res.index]));
				this.booklists[res.index].read_state = null;
				// console.log("4444444" +JSON.stringify(this.booklists[res.index]));
				// 移除全局自定义事件监听器
				// uni.$off('quxiaoreadstate');
			});
		},
		onLoad() {
			this.isLoading = true;
			this.userinfo = uni.getStorageSync('userinfo');
			this.getBookList();
		},
		onPullDownRefresh() {
			// 下拉刷新
			// 清空数据
			this.booklists = [];
			// 获取第一页数据
			this.current_page = 1;
			// 开始获取数据
			this.getBookList();
		},
		onReachBottom() {
			// 上拉加载更多
			// 获得当前页面
			this.current_page = this.current_page + 1;
			this.getBookList();
		},
		methods: {
			// getImgUrl(image){
			//    return "https://www.yedushu.cn/"+image;
			// },			
			getBookList() {
				var url = 'https://www.yedushu.cn/api/bookslist?page=' + this.current_page + '&uid=' + this.userinfo.uid;				
				uni.request({
				    url: url, //书籍列表
				    success: (res) => {
				        // console.log(res.data);
						// console.log(res.data.data);
						// this.booklists = res.data.data;
						if(res.data.last_page > this.current_page)
						{
							this.isLoading = true;
						}
						// 当前以后数据连接新获取的数据
						this.booklists = this.booklists.concat(res.data.data);
						// 停止页面刷新动画
						uni.stopPullDownRefresh();
				    }
				});				
			},
			scan() {
				//  跳转到二维码扫描页面
				uni.navigateTo({
				    url: '../scancode/scancode'
				});
				
				// 允许从相机和相册扫码
				// uni.scanCode({
				// 	scanType: ['qrCode','barCode'],
				//     success: function (res) {
				//         console.log('条码类型：' + res.scanType);
				//         console.log('条码内容：' + res.result);
				//     }
				// });
			},
			isreadstate(bookid, index) {
				// 底部弹出框
				// ref的作用是通过"refShare"可以调用分享组件里面定义的方法。
				// console.log(bookid);
				// console.log(this.userinfo.uid);
				this.$refs.reShare.handleShowShare(bookid,this.userinfo.uid,index);
			},
			xiangdu_save(bookid, index) {
				// 修改读书状态为已想读
				this.userinfo = uni.getStorageSync('userinfo');
				if(this.userinfo == '') {
					// 先判断是否登录，没登录跳转
					uni.navigateTo({
					    url: '../login/login'
					});
					return false;
				}
				uni.request({
				    url: 'https://www.yedushu.cn/api/setreadstate', 
				    data: {
				        bookid: bookid,
						uid: this.userinfo.uid,
						rating: 0,
						memo: this.xiangdu_memo,
						read_state: 1
				    },
					method: 'POST',
				    success: (res) => {
						// 修改读书状态为已想读
						this.booklists[index].read_state  = {read_state : 1};						
				    }
				});
			},
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		padding: 10px 10px 0 10px;
	}
	.item {
		display: flex;
		padding: 15px 0px;
		border-bottom: 1px dashed #E8E8E8;
	}
	.fengmian {
		width: 80px;
		height: 108px;
	}
	.text-area {
		flex: 2;
		display: flex;
		flex-direction: column;
		padding-left: 8px;
	}
	.bookname {
		font-size: 16px;
	}
	.other {
		font-size: 13px;
		color: #494949;
		padding: 5px 0;
	}
	.readstate {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.readinfo {
		display: flex;
		flex-direction: column;
		padding: 0 18px;
		align-items: center;
	}
	.readstate .icopic {
		width: 25px;
		height: 25px;
	}
	.readstate .readfont {
		font-size: 12px;
	}
	.isload {
		font-size: 14px;
		padding: 20px 0px;
		text-align: center;
	}
	.isend {
		font-size: 14px;
		padding: 10px 10px;
		text-align: center;		
	}
	.search {
		display: flex;
		justify-content: space-between;
		padding: 5px 5px;
		border: 1px solid #fafafa;
		background-color: #f4f4f4;
		border-radius: 5px;
		align-items: center;
	}
	.search .searchico {
		width: 28px; 
		height: 28px;
	}
	.search .saomiao {
		padding-left: 5px;
		width: 27px;
		height: 27px;
	}
	.search .searcht {
		display: flex;
		line-height: 28px;
	}
	.search .text {
		font-size: 15px;
		color: #666;
	}
</style>
